<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_packed.js"></script>
<script type="text/javascript">

    var markers = [];
    var markerCluster;
    var map;
    var when = 'today';

    // GOOGLE MAP API Guys - problem solved :)

    function getMarkers(){

        if ( markerCluster ){ markerCluster.clearMarkers(); }

    	$.getJSON(
                    '/kli/nekudot',
                    { when:when },
                    function( data ){

                        markers = [];

                        for ( var i = 0; i < data.length; i++ ) {
                            var latlng = new google.maps.LatLng( data[i].Lat , data[i].Lng );
                            var marker = new google.maps.Marker( { position: latlng } );
                            mrkrPstn( marker, latlng );
                            markers.push( marker );
                        }

                        markerCluster = new MarkerClusterer( map, markers );
                    }
        );
    }

    function mrkrPstn( marker, latlng ){
        google.maps.event.addListener( marker, 'click', function() {
        	updDashboard( latlng );
        });
    }

    function updDashboard( latlng ){
        $("#dashboard").load(
                                '/kli/dashboard',
                                {
                                    lat     : latlng.lat(),
                                    lng     : latlng.lng(),
                                    when    : when
                                }
                            );
    }

    function initialize() {
        var myOptions = {
            zoom: 5,
            center: new google.maps.LatLng( 31.0460510, 34.8516120 ),
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };

        map = new google.maps.Map( document.getElementById("map_canvas"), myOptions );

        getMarkers();

        $('#yesterday').click(function(){
            when = 'yesterday';
            getMarkers();
        });

        $('#today').click(function(){
            when = 'today';
            getMarkers();
        });

        $('#realtime').click(function(){
            when = 'realtime';
            getMarkers();
        });

        $('#back').click(function(){
           window.location = '/';
        });

    }

</script>
</head>
<body onload="initialize()">
    <button id='back'>Back to application</button>
    <button id='yesterday'>Yesterday</button>
    <button id='today'>Today</button>
    <button id='realtime'>Now</button>
  <div id="map_canvas" style="width:100%; height:80%"></div>
  <div id="dashboard" style="width:100%; height:20%">stufff heree</div>
</body>
</html>